<template>
  <div class="assets-card">
    <div class="info">
      <div class="name">{{$t('new.doc13')}}</div>
      <div class="value">{{common.decal2(info.balance)||0}}</div>
    </div>
    <div class="info">
      <div class="name">{{$t('new.doc12')}}</div>
      <div class="value">{{common.decal2(info.electronBalance)||0}}</div>
    </div>
    <div class="info">
      <div class="name">{{$t('new.doc14')}}</div>
      <div class="value">{{common.decal2(info.orderAmount)||0}}</div>
    </div>
    <div class="info">
      <div class="name">{{$t('new.doc1')}}</div>
      <div class="value">{{common.decal2(info.todayIncome)||0}}</div>
    </div>
    <div class="info">
      <div class="name">{{$t('new.doc7')}}</div>
      <div class="value">{{common.decal2(info.totalIncome)||0}}</div>
    </div>
    <div class="info">
      <div class="name">{{$t('new.doc15')}}</div>
      <div class="value">{{common.decal2(info.estimateTotalIncome)||0}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props:['info'],
  data() {
    return {

    }
  },
}
</script>

<style lang="less" scoped>
.assets-card{
  padding: .32rem .4rem;
  margin-bottom: .32rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  //background: url('../../../assets/images/invest/assets-bg.png') no-repeat;
  //background-size: 100% 100%;
  background: linear-gradient(90deg, #FAD7A6 0%, #DAAB6A 100%);
  border-radius: 16px;
  .info{
    flex: 0 0 49%;

    &:nth-of-type(n+3){
      margin-top: .32rem;
    }
    .name{
      color: #693F13;
      font-size: .24rem;
    }
    .value{
      margin-top: .16rem;
      color: #693F13;
      font-size: .32rem;
      font-weight: bold;
    }
  }
}
</style>
